import React, { useState,} from 'react';
import {
  Form,
  Table,
  Input,
  Button,
  Select, 
  Divider,
  Breadcrumb, 
} from 'antd';
import CreateForm from './components/CreateForm'
import styles from './style.less'

const columns  = [
  {
    title: '计划名称',
    dataIndex: ' ',
    tip: '规则名称是唯一的 key',
    rules: [
      {
        required: true,
        message: '规则名称为必填项',
      },
    ],
    render: (dom, entity) => {
      return <a onClick={() => setRow(entity)}>{dom}</a>;
    },
  },
  {
    title: '实践课程/代码',
    dataIndex: ' ',
    valueType: 'textarea',
  },
  {
    title: '实践类型',
    dataIndex: ' ', 
    sorter: true,

  },
  {
    title: '学分',
    dataIndex: ' ', 
    sorter: true,

  },
  {
    title: '开课院(系) ',
    dataIndex: ' ', 
  }, 
  {
    title: '实习时间',
    dataIndex: 'updatedAt',
    sorter: true,
    valueType: 'dateTime',
    hideInForm: true,
    renderFormItem: (item, { defaultRender, ...rest }, form) => {
      const status = form.getFieldValue('status');
      if (`${status}` === '0') {
        return false;
      }
      if (`${status}` === '3') {
        return <Input {...rest} placeholder="请输入异常原因！" />;
      }
      return defaultRender(item);
    },
  },
  {
    title: '实习周期',
    dataIndex: ' ', 
    sorter: true, 
  }, 
  {
    title: '参与班级',
    dataIndex: ' ', 
  }, 
  {
    title: '审核状态',
    dataIndex: ' ', 
  }, 
  {
    title: '实习形式',
    dataIndex: ' ', 
  }, 
  {
    title: '创建人',
    dataIndex: ' ', 
  }, 
  {
    title: '指导老师',
    dataIndex: ' ', 
  }, 
  {
    title: '实习负责老师',
    dataIndex: ' ', 
  }, 
  {
    title: '操作',
    dataIndex: 'option',
    valueType: 'option',
    render: (_, record) => (
      <>
        <a
          onClick={() => {
            handleUpdateModalVisible(true);
            setStepFormValues(record);
          }}
        >
          计划详情
        </a>
        <Divider type="vertical" />
        <a href="">实习要求</a>
        <Divider type="vertical" />

        <a href="">实习项目</a>
        <Divider type="vertical" />

        <a href="">实习明细</a>
        <Divider type="vertical" />

        <a href="">关联指导老师</a>
      </>
    ),
  },
];



const JobPlacement=(props)=> {
const [dataSource, setDataSource] = useState([])
const [createModalVisible, setCreateModalVisible] = useState<boolean>(false)

const handleAddStudent =()=>{
  setCreateModalVisible(true)
}
const handleHidden =()=>{
  setCreateModalVisible(false)
}

  return (
    <>
      <div>
        <Breadcrumb >
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>实战教学</Breadcrumb.Item>
          <Breadcrumb.Item>工作安排</Breadcrumb.Item>
        </Breadcrumb> 
        <Form
          // form={form}
          layout="inline"
          size="middle" 
          name="basic"
          className={styles.search}
          initialValues={{ 
          }}
          // onFinish={handleSubmit}
        >
          <Form.Item label="学年/学期" name="">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item> 
          <Form.Item label="实践类型" name="">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="状态" name="">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item> 
          <Form.Item name="">
            <Input placeholder="计划名称/课程代码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
        <div className={styles.button}> 
            <Button onClick={handleAddStudent}>
              创建计划
            </Button>
            {/* <Button>批量导入</Button> */}
        </div>
        <Table 
          rowKey="id"
          columns={columns}
          dataSource={dataSource} 
        />
        <CreateForm
          // type={type}
          // willEditStudent={willEditStudent}
          modalVisible={createModalVisible}
          // refreshList={refreshList}
          onCancel={handleHidden}
        />
      </div>
    </>
  );
}

export default JobPlacement;